<template>
  <div>
    <el-row>
      <el-col :span="24" class="animate-info">
        <span class="chapterCount">连载 ({{chapterCount}})</span>
        <span>|</span>
        <span>
          最新
          <label class="newchapterCount">第{{chapterCount}}话</label>
        </span>
        <span>
          更新时间
          <label class="newchapterCount">{{updateTime|dateFormart}}</label>
        </span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8" class="chapter" v-for="(chapterItem,index) in chapter" :key="index">
        <a
          target="_blank"
          :href="chapterUrl(chapterItem)"
        >{{chapterTitle(chapterItem)}}</a>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  computed: {
    chapter() {
      return this.$store.state.work.chapter;
    },
    chapterCount() {
     
      return this.$store.state.work.chapter.length;
    },
    updateTime() {
      return this.$store.state.work.info.updateTime;
    },
    chapterTitle(chapterItem) {
      return function(chapterItem) {
        return "第" + chapterItem.idxOrder + "话  " + chapterItem.title;
      };
    },
    chapterUrl(chapterItem) {
      return function(chapterItem) {
        return "/work/" + chapterItem.workId + "/chapter/" + chapterItem.idxOrder;
      };
    }
  }
};
</script>

<style scoped>


.operate {
  margin-top: 40px;
}


.chapter a {
  display: block;
  width: 80%;
  color: #666;
  text-decoration: none;
  background: #f6f6f6;
  padding: 10px 20px;
  font-size: 14px;
  margin-top: 20px;
}
.animate-info {
  padding: 20px 0px;
}
.animate-info > span {
  margin-right: 20px;
  font-family: "PingFang SC", "Microsoft YaHei";
}

.chapterCount {
  font-size: 16px;
  color: #252525;
}
.newchapterCount {
  font-size: 14px;
  color: #ff3f60;
}
</style>